<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >考试管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'LevelManager' }"
            >等级管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="level_from_content">
        <!-- 表单 -->
        <el-row>
          <el-col :span="24">
            <el-form
              ref="submitFrom"
              :model="submitData"
              label-width="100px"
              :rules="rules"
              :disabled="editKey == 3"
            >
              <el-form-item label="等级名称" size="small" prop="title">
                <el-col :span="6">
                  <el-input v-model="submitData.title" maxlength="8"></el-input>
                </el-col>
              </el-form-item>

              <el-form-item label="等级级别" size="small" prop="level">
                <el-col :span="6">
                  <el-select
                    v-model="submitData.level"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="1" value="1"></el-option>
                    <el-option label="2" value="2"></el-option>
                    <el-option label="3" value="3"></el-option>
                    <el-option label="4" value="4"></el-option>
                    <el-option label="5" value="5"></el-option>
                    <el-option label="6" value="6"></el-option>
                    <el-option label="7" value="7"></el-option>
                    <el-option label="8" value="8"></el-option>
                    <el-option label="9" value="9"></el-option>
                    <el-option label="10" value="10"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <div class="level_from_btn_box" v-if="editKey != 3">
      <el-button type="danger" size="mini" @click="saveBtn()">保存</el-button>
      <el-button type="info" size="mini" @click="backBtn()"
        >返回上一页</el-button
      >
    </div>
    <div class="level_from_btn_box" v-else>
      <el-button type="danger" size="mini" @click="backBtn()">返回</el-button>
    </div>
  </div>
</template>
<style src="../../assets/css/exam/levelFrom.css" scoped></style>

<script>
export default {
  name: "LevelFrom",
  components: {},
  data() {
    return {
      levelId: "", // 等级id
      pageTitle: "", // 页面名称
      editKey: 0, // 是否编辑
      submitData: {
        title: "",
        level: "",
      }, // 提交数据
      rules: {
        title: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
        level: [
          { required: true, message: "请选择等级级别", trigger: "change" },
        ],
      }, // 校验规则
      loadingKey: false,
      loadingText: "",
    };
  },
  created: function () {
    let params = this.$route.params;
    if (JSON.stringify(params) != "{}") {
      this.$store.commit("set_levelManagerParams", params);
    }
    if (params.id != undefined && params.id != "") {
      this.levelId = params.id;
    } else {
      this.levelId = this.$store.state.levelManagerParams.id;
    }

    if (params.key != undefined && params.key != "") {
      this.editKey = params.key;
    } else {
      this.editKey = this.$store.state.levelManagerParams.key;
    }

    if (this.editKey == 2) {
      this.pageTitle = "编辑等级";
    } else if (this.editKey == 1) {
      this.pageTitle = "添加等级";
      this.levelId = "";
    } else {
      this.pageTitle = "查看等级";
    }
    if (this.editKey != 1 && this.levelId != false) {
      this.getDataFn();
    }
  },
  methods: {
    // 查询考生信息
    getDataFn: function () {
      let that = this;
      let url = "/admin/category/show";
      let data = {
        id: this.levelId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.submitData = response.category;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 提交保存
    saveBtn: function () {
      let that = this;
      let url = "";
      let data = {};
      if (this.editKey == 1) {
        url = "/admin/category/store";
        data = {
          title: this.submitData.title,
          level: this.submitData.level,
          image_path: "",
        };
      } else {
        url = "/admin/category/update";
        data = {
          id: this.levelId,
          title: this.submitData.title,
          level: this.submitData.level,
          image_path: "",
        };
      }
      this.$refs.submitFrom.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          that.loadingText = "处理中...";
          that.loadingKey = true;
          that.axios
            .post(url, data)
            .then((response) => {
              that.loadingKey = false;
              if (response.code == 0) {
                that.$message.success("保存成功");
                that.backBtn();
              } else {
                that.$message.error(response.msg);
              }
            })
            .catch(function (error) {
              that.loadingKey = false;
              console.log(error);
            });
        }
      });
    },
    // 返回上一页
    backBtn: function () {
      this.$router.go(-1);
    },
  },
};
</script>
